<template>
  <div>
    <div style="margin-top: 15px;">
      <el-input
        placeholder="请输入内容"
        style="width:500px;float:left"
        v-model="queryInput"
        class="input-with-select"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
        ></el-button>
      </el-input>
      <el-button
        type="primary"
        @click="add"
        style="float:right"
      >新增</el-button>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      border
      max-height="820"
    >
      <el-table-column
        type="selection"
        width="45"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="注册时间"
        width="180"
        sortable
      ></el-table-column>
      <el-table-column
        prop="username"
        label="工号"
        width="180"
        sortable
      ></el-table-column>
      <el-table-column
        prop="nickname"
        label="姓名"
        sortable
      ></el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button
            @click="handleEdit(scope.$index,scope.row)"
            type="text"
            size="small"
          >编辑</el-button>
          <el-button
            @click="handleDelete(scope.$index,scope.row)"
            type="text"
            size="small"
          >删除</el-button>
          <!-- <el-button type="text" size="small">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!--编辑界面-->
    <el-dialog
      title="用户信息"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        :model="form"
        label-width="80px"
      >
        <el-form-item label="注册时间">
          <el-date-picker
            v-model="form.createTime"
            auto-complete="off"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="工号">
          <el-input
            v-model="form.username"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input
            v-model="form.nickname"
            auto-complete="off"
          ></el-input>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="cancel">取消</el-button>
        <el-button
          type="primary"
          @click="update"
        >更新</el-button>
      </div>
    </el-dialog>

    <!--新增界面-->
    <el-dialog
      title="新增用户"
      :visible.sync="dialogaddFormVisible"
    >
      <el-form
        :model="form"
        label-width="80px"
      >
        <!-- <el-form-item label="注册时间" prop="createTime">
            <el-date-picker v-model="form.createTime" auto-complete="off" ></el-date-picker>
        </el-form-item> -->
        <el-form-item
          label="工号"
          prop="username"
        >
          <el-input
            v-model="form.username"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="姓名"
          prop="nickname"
        >
          <el-input
            v-model="form.nickname"
            auto-complete="off"
          ></el-input>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="cancel">取消</el-button>
        <el-button
          type="primary"
          @click="addUser"
        >确定</el-button>
      </div>
    </el-dialog>

    <div class="tabListPage">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tableData: [],
      // 默认显示第一条
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 1,
      pageSizes: [10, 20, 30, 40],
      PageSize: 10,
      dialogFormVisible: false,
      dialogaddFormVisible: false,
      form: {},
      currentIndex: '',
      queryInput: ''
    }
  },

  methods: {
    handleEdit (index, row) {
      this.form = this.tableData[index]
      this.currentIndex = index
      this.dialogFormVisible = true
    },

    //adduser按钮
    addUser () {
      var qs = require('qs');
      // this.form.createTime=""
      // let params={
      //   username:this.username
      // }
      // this.axios.post('/api/api-user/users-anon/add', qs.stringify(this.form),
      //   {
      //     headers: { "Content-Type": "application/x-www-form-urlencoded;charset=utf-8", }
      //   }).then(reponse => {
      //     // 将数据赋值给tableData
      //     this.tableData = reponse.data.data;
      //     // 将数据的长度赋值给totalCount
      //     this.totalCount = reponse.data.count;
      //   })
      // //alert(Object.keys(this.form))
      // this.dialogaddFormVisible = false
    },


    //更新按钮
    update () {
      //this.form.date = reformat(this.form.date)
      //this.tableData.push(this.form)
      var qs = require('qs');
      // this.form.createTime=""
      // let params={
      //   username:this.username
      // }
      // this.axios.post('/api/api-user/users-anon/update', qs.stringify(this.form),
      //   {
      //     headers: { "Content-Type": "application/x-www-form-urlencoded;charset=utf-8", }
      //   }).then(reponse => {
      //     // 将数据赋值给tableData
      //     this.tableData = reponse.data.data;
      //     // 将数据的长度赋值给totalCount
      //     this.totalCount = reponse.data.count;
      //   })
      this.$message({
        type: 'success',
        message: '操作成功!'
      })
      this.dialogFormVisible = false
    },
    //取消按钮
    cancel () {
      this.dialogFormVisible = false
      this.dialogaddFormVisible = false
    },
    //新增按钮
    add () {
      this.form = {
        // createTime: '',
        username: '',
        nickname: ''
      }
      this.dialogaddFormVisible = true
    },
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 将页码，及每页显示的条数以参数传递提交给后台
    getData () {
      var qs = require('qs');
      // this.axios.post('/api/api-user/users-anon/list', qs.stringify({ page: this.PageSize, size: this.currentPage }),
      //   {
      //     headers: { "Content-Type": "application/x-www-form-urlencoded;charset=utf-8", }
      //   }).then(reponse => {
      //     // 将数据赋值给tableData
      //     this.tableData = reponse.data.data;
      //     // 将数据的长度赋值给totalCount
      //     this.totalCount = reponse.data.count;
      //   })
    },
    // 分页
    // 每页显示的条数
    handleSizeChange (val) {
      // 改变每页显示的条数 
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
      this.getData()
    },
    // 显示第几页
    handleCurrentChange (val) {
      // 改变默认的页数
      var total = (val) * (this.PageSize)
      if (total > this.totalCount) {
        val = 1;
      }
      this.currentPage = val
      // 切换页码时，要获取每页显示的条数
      this.getData()
    },
    created: function () {
      this.getData()
    }
  },
  mounted: function () {
    var qs = require('qs');
    // this.axios.post('/api/api-user/users-anon/list', qs.stringify({ page: this.PageSize, size: this.currentPage }),
    //   {
    //     headers: { "Content-Type": "application/x-www-form-urlencoded;charset=utf-8", }
    //   }).then(reponse => {
    //     // 将数据赋值给tableData
    //     this.tableData = reponse.data.data;
    //     // 将数据的长度赋值给totalCount
    //     this.totalCount = reponse.data.count;
    //   }).then(function (error) {
    //     // console.log(error)
    //   });
  }
}
</script>
<style scoped>
</style>